<template>
  <el-dialog
    title="按发货单验收选择"
    :visible.sync="deliveryvisabled"
    width="80%"
    :before-close="handleClose"
    @opened="initData"
    :destroy-on-close="true"
  >
    <div v-loading="dialogLoading">
      <div
        class="ccui-advanced-search-wrapper ccui-clearfix"
        style="position: relative;"
      >
        <div class="types-wp">
          <div class="label">验收类型：</div>
          <el-select
            :disabled="$route.query.title === '按发货单验收'"
            v-model="yanshouType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
          <!-- 填报单位 -->
          <div class="label" style="margin-left:20px;">填报单位：</div>
          <el-select v-model="orgName" placeholder="请选择填报单位">
            <el-option
              v-for="item in umOrganizations"
              :key="item.orgId"
              :label="item.name"
              :value="item.orgId"
            >
            </el-option>
          </el-select>
        </div>

        <el-search
          :formProp="filter"
          @search="search"
          :isShow="isShow"
          @resetForm="resetForm"
        >
          <!-- 单行搜索 -->
          <template slot="search">
            <el-input
              v-model="filter.thirdCategoriesOfName"
              clearable
              searchLabel="分类名称"
              placeholder="请输入分类名称模糊查询"
              @blur="handleTrim('thirdCategoriesOfName')"
            ></el-input>
            <el-input
              v-model="filter.shipCode"
              clearable
              searchLabel="发货单编号"
              placeholder="请输入发货单编号模糊查询"
            ></el-input>
            <el-input
              v-model="filter.contractCode"
              clearable
              searchLabel="合同编号"
              placeholder="请输入合同编号模糊查询"
            ></el-input>
            <el-input
              v-model="filter.reportInOrgName"
              clearable
              searchLabel="填报单位"
              placeholder="请输入填报单位模糊查询"
            ></el-input>

            <!--// 5是当前为关闭状态，4是当前为开启状态 全部是空 -->
            <el-select
              v-model="filter.shipStatus"
              placeholder="请选择状态查询"
              clearable
              searchLabel="状态"
            >
              <el-option label="开启" value="开启">开启</el-option>
              <el-option label="关闭" value="关闭">关闭</el-option>
              <el-option label="全部" value="全部">全部</el-option>
            </el-select>
          </template>
          <!-- 展开后多个搜索 -->
          <el-input
            v-model="filter.thirdCategoriesOfName"
            clearable
            slot="searchItem4"
            searchLabel="分类名称"
            placeholder="请输入分类名称模糊查询"
            @blur="handleTrim('thirdCategoriesOfName')"
          ></el-input>
          <el-input
            v-model="filter.shipCode"
            clearable
            slot="searchItem1"
            searchLabel="发货单编号"
            placeholder="请输入发货单编号模糊查询"
          ></el-input>
          <el-input
            v-model="filter.contractCode"
            searchLabel="合同编号"
            clearable
            slot="searchItem2"
            placeholder="请输入合同编号模糊查询"
          ></el-input>
          <el-input
            v-model="filter.reportInOrgName"
            clearable
            slot="searchItem3"
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
          ></el-input>

          <el-select
            v-model="filter.shipStatus"
            placeholder="请选择状态查询"
            clearable
            slot="searchItem5"
            searchLabel="状态"
          >
            <el-option label="开启" value="开启">开启</el-option>
            <el-option label="关闭" value="关闭">关闭</el-option>
            <el-option label="全部" value="全部">全部</el-option>
          </el-select>
        </el-search>
      </div>
      <!-- 表格 -->
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :data="tableData"
          border
          style="min-height:300px"
          height="100%"
        >
          <el-table-column type="index" fixed label="序号" width="50">
          </el-table-column>
          <el-table-column
            fixed
            prop="shipCode"
            width="150"
            :show-overflow-tooltip="true"
            label="发货单编号"
          ></el-table-column>
          <el-table-column
            prop="shipName"
            width="300"
            :show-overflow-tooltip="true"
            label="发货单名称"
          ></el-table-column>
          <el-table-column
            prop="contractCode"
            width="150"
            :show-overflow-tooltip="true"
            label="合同编号"
          ></el-table-column>
          <el-table-column
            prop="reportInOrgName"
            :show-overflow-tooltip="true"
            width="200"
            label="填报单位"
          ></el-table-column>
          <el-table-column
            prop="partyBName"
            :show-overflow-tooltip="true"
            width="200"
            label="供应商名称"
          ></el-table-column>
          <el-table-column
            width="100"
            prop="thirdCategoriesOfName"
            :show-overflow-tooltip="true"
            label="分类名称"
          ></el-table-column>
          <el-table-column
            width="100"
            prop="carNumber"
            label="车牌号"
          ></el-table-column>
          <el-table-column
            prop="orderQuantity"
            width="100"
            :show-overflow-tooltip="true"
            :formatter="numFormatter"
            label="订单数量"
          ></el-table-column>
          <el-table-column
            prop="shipTotolNum"
            :show-overflow-tooltip="true"
            width="100"
            label="发货单数量"
            :formatter="shipTotolNumFormatter"
          ></el-table-column>

          <el-table-column fixed="right" label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                v-if="scope.row.shipStatus !== 5"
                @click="yanshou(scope.row, scope.$index)"
                ><span :class="[index === scope.$index ? 'yanshou' : '']">
                  {{ !$route.query.status ? "验收" : "选择" }}</span
                ></el-button
              >
              <template v-if="!$route.query.status">
                <el-button
                  type="text"
                  size="small"
                  v-if="scope.row.shipStatus !== 5"
                  @click="closeAndstart(scope.row.id, 6)"
                  >关闭</el-button
                >
                <el-button
                  v-if="scope.row.shipStatus === 5"
                  type="text"
                  size="small"
                  @click="closeAndstart(scope.row.id, 5)"
                  >开启</el-button
                >
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  listInAcceptShipOrder,
  updateOcShipStatus,
  getUserInfo,
  getOgenName
} from "../../../api/index";
import { formatNumber, addUrlPerFix } from "@/basa/utils";

export default {
  props: {
    deliveryvisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      index: null,
      isShow: false,
      filter: { shipStatus: "全部" },
      yanshouType: "按发货单验收",
      orgName: "", // 填报单位
      orgRow: {},
      dialogLoading: false,
      // 类型选项
      options: [
        {
          label: "按发货单验收"
        },
        {
          label: "按订单验收"
        },
        {
          label: "按合同验收"
        }
      ],
      curentItem: null,
      umOrganizations: [],
      tableData: []
    };
  },
  watch: {
    yanshouType: {
      handler(n) {
        switch (n) {
          case "按合同验收":
            this.$emit("fahuoOtherDialog", {
              name: "contractvsabled",
              isShow: true
            });
            this.yanshouType = "按发货单验收";
            this.handleClose();
            break;
          case "按订单验收":
            this.$emit("fahuoOtherDialog", {
              name: "ordervisabled",
              isShow: true
            });
            this.yanshouType = "按发货单验收";
            this.handleClose();

            break;
        }
      },
      immediate: true
    },
    orgName: {
      handler(n) {
        const arr = this.umOrganizations.filter(item => {
          return item.orgId === n;
        });
        this.orgRow = { orgId: arr[0].orgId, orgName: arr[0].name };
        this.getFahuoList({ reportInOrgId: arr[0].orgId, shipStatus: "" });
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy();
    next();
  },

  created() {
    this.initData();
  },

  methods: {
    // 弹框显示回调
    initData() {
      this.userInfo();
    },
    // 发货单开启关闭
    closeAndstart(id, operType) {
      updateOcShipStatus({ id, operType }).then(res => {
        this.$message.success(res.data.message);
        this.getFahuoList();
      });
    },
    // 列表数据
    getFahuoList(shearchVal = { shipStatus: "" }) {
      this.dialogLoading = true;
      listInAcceptShipOrder({
        ...shearchVal
      }).then(res => {
        const { data } = res.data;
        this.tableData = data;
        this.dialogLoading = false;
      });
    },
    // 验收点击事件
    yanshou(row, index) {
      if (this.orgName.length < 1) {
        this.$message.warning("请选择填报单位");
        return;
      }

      this.curentItem = row;
      this.index = index;
      this.$router.push({
        path: "/checkManagement/manage/delivery-add",
        query: {
          status: "新增",
          title: "按发货单验收",
          contractId: this.curentItem.pcConcId,
          data: this.curentItem.id,
          htCode: this.curentItem.contractCode,
          orgRow: JSON.stringify(this.orgRow)
        }
      });
      this.handleClose();
    },
    // 确定按钮
    confirm(val) {
      if (!this.curentItem) {
        this.$message.error("未选择验收项");
        return;
      }
      this.$router.push({
        path: "/checkManagement/manage/delivery-add",
        query: {
          status: "新增",
          title: "按发货单验收",
          contractId: this.curentItem.pcConcId,
          data: this.curentItem.id,
          htCode: this.curentItem.contractCode
        }
      });
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      this.curentItem = null;
      this.index = null;
      document.getElementsByClassName(".yanshou").style =
        "color: #0089EF !important;";
      this.$emit("update:deliveryvisabled", false);
    },
    // 重置
    resetForm() {
      this.curentItem = null;
      this.index = null;
      this.filter.shipStatus = "开启";
    },
    // 搜索
    search(shearchVal) {
      // 5是当前为关闭状态，4是当前为开启状态 全部是空
      switch (shearchVal.shipStatus) {
        case "开启":
          shearchVal.shipStatus = 4;
          break;
        case "关闭":
          shearchVal.shipStatus = 5;
          break;
        case "全部":
          shearchVal.shipStatus = "";
          break;
      }
      shearchVal.reportInOrgId = this.orgRow.orgId;
      this.getFahuoList(shearchVal);
    },
    numFormatter(row) {
      return formatNumber(row.orderQuantity, 3);
    },
    shipTotolNumFormatter(row) {
      return formatNumber(row.shipTotolNum, 3);
    },
    // 获取填报单位
    getOgenName(openId) {
      getOgenName({ openIds: [openId] }).then(res => {
        this.umOrganizations = res.data.data[openId];
        this.orgName = this.umOrganizations[0].orgId;
      });
    },
    // 获取用户信息
    userInfo() {
      this.dialogLoading = true;
      getUserInfo(
        addUrlPerFix(process.env.VUE_APP_BASEP_URL) + "/apis/basap/getUserInfo",
        {}
      ).then(res => {
        const { userInfo } = res.data.data;
        this.getOgenName(userInfo.openId);
      });
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.filter,
        key,
        this.filter[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.types-wp {
  display: flex;
  position: absolute;
  z-index: 2;
  .label {
    line-height: 29px;
  }
}
/deep/.el-dialog__title {
  position: absolute;
  top: 20px;
  width: 85px !important;
}
.yanshou {
  color: #67c23a !important;
}
/deep/ .el-dialog__body .el-form .el-form-item:last-child {
  margin-bottom: 10px;
}
/deep/ .el-dialog__title {
  width: 120px !important;
}
/deep/ .el-table__body-wrapper {
  z-index: 1;
}
</style>
